<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽的基本使用-普通插槽和具名插槽</title>
</head>
<body>
<!--
■slot翻译为插槽:
  口在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
  口插槽的目的是让我们原来的设备具备更多的扩展性。
  口比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。

■组件的插槽:
  口组件的插槽也是为了让我们封装的组件更加具有扩展性。
  口让使用者可以决定组件内部的一些内容到底展示什么。

■栗子：移动网站中的导航。
  口移动开发中,几乎每个页面都有导航栏。
  口导航栏我们必然会封装成一个插件,比如nav-bar组件。
  口一旦有了这个组件,我们就可以在多个页面中复用了。

■但是,每个页面的导航是一样的吗?No,我以京东M站为例
-->

<!--
■如何去封装这类的组件呢?
  口它们也很多区别,但是也有很多共性。
  口如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
  口但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。

■如何封装合适呢?抽取共性,保留不同。
  口最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
  口一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
  口是搜索框,还是文字,还是菜单。由调用者自己来决定。

■这就是为什么我们要学习组件中的插槽slot的原因
-->

<!--
1、插槽的基本使用 <slot></slot>
2、插槽的默认值<slot>button</slot>,
3、如果有多个值,同时放入到组件进行替换时,一起作为替换元素
-->
<div id="app">

  <!--  【■普通插槽】-->
  <!--  普通插槽的使用方式，会替换所有没有name的slot插槽-->
  <p style="color: red">普通插槽的使用方式:</p>
  <my-div>
    <button>替换按钮</button>
  </my-div>
  <br>

  <!--  组件内部没有内容，则显示渲染插槽中默认的元素内容-->
  <my-div></my-div>
  <hr>

  <!----------------------------------------------------------------------------------------->

  <!--  【■具名插槽】-->
  <!--  具名插槽的使用方式,指定替换那些插槽中的内容，用slot绑定插槽名字-->
  <p style="color: red">具名插槽的使用方式:</p>
  <my-div2>
    <span slot="left">替换左边</span>
    <span slot="right">替换右边</span>
  </my-div2>
  <hr>

</div>

<!--■1、普通的插槽的使用方式（模板）-->
<template id="myDiv">
  <div>
    <p>我是子组件头</p>
    <p>我是子组件内容</p>

    <!--  组件内定义插槽，可以往插槽中放入默认标签和内容，也可以不放，那么在使用该组件标签时，标签内部没有写其他标签元素内容，
        默认显示插槽中的元素内容，如果使用组件时，组件内部使用了其他标签，则这些标签会替换掉插槽中的内容或标签元素-->
    <slot>
      <button>按钮</button>
    </slot>
    <!--    <slot></slot>-->
  </div>
</template>

<!--■2、具名插槽（模板）-->
<template id="myDiv2">
  <div>
    <!--    指定插槽名称后就可以在上面指定的替换那个插槽里面的内容元素了-->
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  //构造组件对象
  const myDiv = {
    template: "#myDiv"
  }

  const myDiv2 = {
    template: "#myDiv2"
  }

  const app = new Vue({
    el: "#app",
    //注册局部组件
    components: {
      myDiv,
      myDiv2
    }
  });
</script>
</body>
</html>